<template>
	<el-main v-infinite-scroll="addImgs" style="overflow:auto" infinite-scroll-immediate="true" infinite-scroll-distance="500" infinite-scroll-delay="150">
		  <div class="img-container-mobile" v-for="(img, index) in imgs" keys="index">
			  <img-container :img="img"></img-container>
		  </div>
		  <div class="img-container-pc">
			<div v-for="(img, index) in imgsList[0]" keys="index">
				<img-container :img="img"></img-container>
			</div>
		  </div>
		  <div class="img-container-pc">
			<div v-for="(img, index) in imgsList[1]" keys="index">
				<img-container :img="img"></img-container>
			</div>
		  </div>
		  <div class="img-container-pc">
			<div v-for="(img, index) in imgsList[2]" keys="index">
				<img-container :img="img"></img-container>
			</div>
		  </div>
		  <div class="img-container-pc">
			<div v-for="(img, index) in imgsList[3]" keys="index">
				<img-container :img="img"></img-container>
			</div>
		  </div>
	</el-main>
</template>

<script scoped>
import ImgContainer from './ImgContainer.vue'
export default{
	name: "ImageRandom",
	data(){
		return {
			imgs:[].sort((a, b)=>{return b.width/b.height-a.width/a.height}),
			imgsList: [[], [], [], []],
			imgsLength: [0, 0, 0, 0]
		}
	},
	methods:{
		// 滚动加载图片
		addImgs(){
			this.$axios.get('/api/images/random48').then(
				(res)=>{
					if(res.state = '200'){
						this.imgs = this.imgs.concat(res.data);
						let sortedImgs = res.data.sort((a,b)=>{return a.size.split('×')[1]-b.size.split('×')[1]})
						for(let i=0;i<sortedImgs.length;i++){
							this.imgsList[this.lowestImgListIndex()].push(sortedImgs[i]);
							this.imgsLength[this.lowestImgListIndex()]+=Number.parseInt(res.data[i].size.split('×')[1]);
						}
					}
				}
			).catch(
				(err)=>{
					console.log(err);
				}
			)
		},
		// 找到最短列
		lowestImgListIndex(){
			let lowest = this.imgsLength.reduce((a, b)=>b>a?a:b);		
			return this.imgsLength.findIndex(value=>value == lowest);
		}
	},
	components:{
		ImgContainer
	},
	mounted(){
		this.addImgs();
	}
}
</script>

<style scoped>
.el-main{
	background-color: #F0F8FF;
	/* height: 100%; */
	overflow: scroll;
	overflow-x: hidden;
}
/* 媒体查询 */
@media screen and (max-width:480px) {
	.el-main{
		/* 弹性布局 */
		display: flex;
		display: -webkit-flex;
		flex-flow: row wrap;
	}
	.img-container-mobile{
		display: block;
	}
	.img-container-pc{
		display: none;
	}
}
@media screen and (min-width:480px) and (max-width:1600px) {
	.el-main{
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		width: 100%;
	}
	.img-container-pc{
		width: 25%;
		display: flex;
		flex-flow: column nowrap; 
	}
	.img-container-mobile{
		display: none;
	}
}
</style>
